<template>
	<view class="app l_pages" :style="skin">
		<jnavbar :title="title"></jnavbar>

		<view class="page_container">
			<view class="box u-p-20">
				<view class="u-m-b-20">将余额赠送给:</view>
				<view class="u-flex u-flex-1">
					<view class="img-box"><vimage imgstyle="width:100rpx;height:100rpx;border-radius: 50%;" :src="giveuser.picurl"></vimage></view>
					<view class="u-flex u-flex-col u-col-top u-m-l-20">
						<text class="u-m-b-20">{{ giveuser.nickname }}</text>
						<text>{{ giveuser.id }}</text>
					</view>
				</view>
			</view>
			<u-cell-group class="box">
				<u-cell-item v-if="type==0" hover-class="cell-hover-class" title="账户余额" :value="UserInfo.total" :arrow="false"></u-cell-item>
				<u-cell-item v-if="type==1" hover-class="cell-hover-class" title="账户积分" :value="UserInfo.integral" :arrow="false"></u-cell-item>
				
				<u-cell-item :title-style="titlestyle" hover-class="cell-hover-class" :title="type==0?'￥':''" :arrow="false">
					<input class="NumInput" v-model="amount" v-numberinput.float="2" />
					
				</u-cell-item>
				<u-cell-item :arrow="false" :title="chargedata.charge_name" v-if="chargedata.charge_status">
					<text>{{ service_charge }}</text>
				</u-cell-item>
			</u-cell-group>
			<view class="rule_btn">
				<text @click="show=true">转赠规则</text>
			</view>
			
			<view class="btns"><u-button type="primary" shape="circle" @click="btnclick">确认转赠</u-button></view>
		</view>
		<u-popup v-model="show" mode="center" width="600rpx" height="800rpx" border-radius="14" :closeable="true">
			<scroll-view class="popup-content" scroll-y>
				<view class="content_title">转赠规则</view>
				<u-parse :tag-style="style" :domain="baseUrl" :html="chargedata.remark" :show-with-animation="true"></u-parse>
			</scroll-view>
		</u-popup>
		<uni-login ref="Login" @callback="logincallback"></uni-login>
		<tab-bar ref="tabbar"></tab-bar>
	</view>
</template>

<script>
import {mapState, mapMutations} from 'vuex';
import util from '@/common/util';
import base from '@/common/baseUrl';

export default {
	data() {
		return {
			giveuser: {},
			assettransfer: {},
			amount: 0,
			titlestyle: {
				'font-size': '60rpx'
			},
			title: '',
			chargedata: {},
			show:false,
			popupContent:{
				
			},
			style: {
				// 字符串的形式
				p: 'word-wrap : break-word'
			}
		};
	},
	computed: {
		service_charge() {
			if (this.chargedata) {
				if (this.chargedata.charge_status) {
					let a = (this.chargedata.charge * this.amount) / 100;
					return a.toFixed(2);
				} else {
					return 0.0;
				}
			} else {
				return 0.0;
			}
		},		
		baseUrl() {
			return util.geturl(base.baseUrl);
		},
		...mapState({
			hastabbar: state => state.hastabbar,
			UserInfo: state => state.userInfo,
			skin: state => state.skin
		})
	},
	async onLoad(e) {
		await this.$getWx;
		this.type = e.type;
		if (e.type == 0) {
			this.title = '余额转赠';
		} else if (e.type == 1) {
			this.title = '积分转赠';
		} else {
			uni.navigateBack();
		}

		let giveuser = uni.getStorageSync('giveuser');
		if (giveuser) {
			this.giveuser = JSON.parse(giveuser);
		}
		this.getconfiguration();
		// this.$nextTick(a => {
		// 	_this.$refs.tabbar.gettabs();
		// });
	},
	directives: {
		numberinput: {
			bind: function(el, binding, vnode) {
				const ele = el.tagName === 'INPUT' ? el : el.querySelector('input');
				ele.addEventListener('input', util.onInput(el, ele, binding, vnode), false);
			}
		}
	},
	methods: {
		allamount() {
			this.amount = Number(this.assessment);
		},
		logincallback(e) {
			if (e.islogin) {
				this.getconfiguration();
			}
		},

		getconfiguration() {
			this.$http('/configuration/assettransfer', {}, 'GET').then(res => {
				this.assettransfer = res.data.msg;
				this.chargedata = this.type == 0 ? this.assettransfer.balance : this.assettransfer.integral;
			});
		},
		btnclick() {
			let url = '/assettransfer/amount';
			if (this.type == 1) {
				url= '/assettransfer/integral';
			}
			let data = {
				gifted_user_id: this.giveuser.id,
				amount: this.amount
			};
			this.$http(url, data, 'POST').then(res => {
				uni.showToast({
					title: '赠送成功'
				});
				if (this.type == 0) {
					this.Jumpurl({
						link: '/pages/mine/balance/balance',
						login_type: 2,
						type: 1
					});
				}else{
					this.Jumpurl({
						link: '/pages/mine/integral/integral',
						login_type: 2,
						type: 1
					});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.box {
	margin-bottom: 20rpx;
	background-color: #ffffff;
}
.money {
	height: 160rpx;
	/deep/input {
		font-size: 64rpx;
	}
}
.NumInput {
	font-size: 48rpx;
	color: #000000;
	color: #303133;
	flex: 1;
	text-align: left;
}
.btns {
	margin: 32rpx 32rpx;
	position: fixed;
	bottom: 30rpx;
	width: calc(100% - 64rpx);
}
.card_div {
	width: 560rpx;
	background-color: #ffffff;
}
.iconfont {
	margin-right: 10rpx;
}
.active {
	color: #ff3c29;
}
.bind_card {
	height: 100rpx;
	align-items: center;
	justify-content: center;
	color: #ff3c29;
	text-decoration: underline;
}
.rule_btn{
	margin: 0 auto;
	width: 100%;
	text-align: center;
	
}
</style>
